<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_新增背景模型属性_clip</title>
</head>
<style>
    .box1{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
        font-size: 40px;
        padding: 50px;
        border: 50px dashed rgba(255,0,0,0.4);
        text-align: center;
        line-height: 400px;
        background-image: url("../../resource/韩立1.png");
        background-repeat: no-repeat;
        background-clip: border-box;/*border以外的背景图是不可见的*/
    }
    .box2{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
        font-size: 40px;
        padding: 50px;
        border: 50px dashed rgba(255,0,0,0.4);
        text-align: center;
        line-height: 400px;
        background-image: url("../../resource/韩立1.png");
        background-repeat: no-repeat;
        background-clip: padding-box;/*padding以外的背景图是不可见的,不仅是图片,背景颜色color也包括*/

    }
    .box3{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
        font-size: 40px;
        padding: 50px;
        border: 50px dashed rgba(255,0,0,0.4);
        text-align: center;
        line-height: 400px;
        background-image: url("../../resource/韩立1.png");
        background-repeat: no-repeat;
        background-clip: content-box;/*content以外的背景图是不可见的*/
    }
    .box4{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
        padding: 50px;
        border: 50px dashed rgba(255,0,0,0.4);
        text-align: center;
        line-height: 400px;
        background-image: url("../../resource/韩立1.png");
        background-repeat: no-repeat;
        /*文字加粗*/
        font-weight: bolder;
        font-size: 80px;
        color: transparent;

        background-clip: text;/*图片只出现在文字区域中,这里需要配合文字透明才能体现出来*/
    }
</style>
<body>
<div class="box1">你好啊</div>
<hr>
<div class="box2">你好啊</div>
<hr>
<div class="box3">你好啊</div>
<div class="box4">你好啊</div>
</body>
</html>